<template>
    <a-spin :spinning="spinning" tip="Loading...">
        <a-tabs v-model:activeKey="tabKey" type="card" :tabBarGutter="6">
            <a-tab-pane key="recommendations" tab="实时抓取"></a-tab-pane>
            <a-tab-pane key="favorites" tab="我的收藏"></a-tab-pane>
            <a-tab-pane key="scan" tab="搜索"></a-tab-pane>
        </a-tabs>
        <a-tabs v-model:activeKey="platform" tab-position="left" @tabScroll="callback">
            <a-tab-pane v-for="(item, key) in platformList" :key="key" :tab="item.title" :disabled="item.disabled">
                <div class="box">
                    <!-- 实时抓取、我的收藏 -->
                    <template v-if="['recommendations', 'favorites'].includes(tabKey)">
                        <Waterfall :list="item[tabKey]" :breakpoints="breakpoints" animationEffect="fadeIn">
                            <template #default="{ item, url, index }">
                                <a-card hoverable :loading="false" :bodyStyle="{ padding: '10px' }"
                                    @click.stop="openNewTab(item.feed_url)">
                                    <template #cover>
                                        <div class="wid_100 hei_100" style="position: relative;">
                                            <img alt="example" :style="`width: 100%; object-fit: cover;`"
                                                :src="item.image_base64 || item.image_url" />
                                            <div
                                                style="position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);">
                                            </div>
                                            <span style="position: absolute; bottom: 5px; right: 10px; color: #fff;">
                                                <HeartFilled style="margin-right: 5px;color: #FF4D4F;" />{{
                                                    formatNumber(item.like_count)
                                                }}
                                            </span>
                                            <p style="position: absolute; bottom: -5px; left: 10px; ">
                                                <a-tag v-for="(tag, index) in item.keywords" :key="index"
                                                    color="#87d068">{{ tag ? tag : '推荐' }}</a-tag>
                                            </p>
                                            <span v-if="item.video" data-v-a264b01a="" class="play-icon">
                                                <svg t="1745838016555" class="reds-icon" viewBox="0 0 1024 1024"
                                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7943">
                                                    <path
                                                        d="M743.7 552.6 426.6 764c-33.4 22.2-60.8 7.6-60.8-32.6L365.8 292.6c0-40.2 27.4-54.9 60.8-32.5l317.1 211.5C777.1 493.7 777.1 530.3 743.7 552.6L743.7 552.6 743.7 552.6z"
                                                        fill="#ffffff" p-id="7944"></path>
                                                </svg>
                                            </span>
                                        </div>

                                    </template>
                                    <template #actions>
                                        <p class="tab">
                                            {{ formatNumber(item?.profile_likes_stats?.max) }}
                                            <span>最大</span>
                                        </p>
                                        <p class="tab">
                                            {{ formatNumber(item?.profile_likes_stats?.std) }}
                                            <span>标准差</span>
                                        </p>
                                        <p class="tab">
                                            {{ formatNumber(item?.profile_likes_stats?.median) }}
                                            <span>中位数</span>
                                        </p>
                                        <p v-if="tabKey === 'recommendations'" class="tab" @click.stop="collect(item)"
                                            style="color: #FF4D4F;">
                                            <a-button type="primary" size="small" danger>
                                                <template #icon>
                                                    <HeartFilled />
                                                </template>
                                            </a-button>
                                            <span>收藏</span>
                                        </p>
                                        <p v-if="tabKey === 'favorites'" class="tab"
                                            @click.stop="deleteFavorites(item._id, index)" style="color: #FF4D4F;">
                                            <a-button type="primary" size="small" danger>
                                                <template #icon>
                                                    <DeleteOutlined />
                                                </template>
                                            </a-button>
                                            <span>删除</span>
                                        </p>

                                    </template>
                                    <a-card-meta :title="item.title || '「无标题」'">
                                        <template #description>
                                            {{ formatDate(item.createdAt) }}
                                        </template>
                                    </a-card-meta>
                                </a-card>
                            </template>
                        </Waterfall>
                        <svg class="result" v-if="!platformList[platform][tabKey]?.length" height="1024" node-id="1"
                            sillyvg="true" template-height="1024" template-width="1024" version="1.1"
                            viewBox="0 0 1024 1024" width="1024" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink">
                            <defs node-id="81">
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_1_" node-id="6"
                                    spreadMethod="pad" x1="511.2782" x2="511.2782" y1="666.8383" y2="982.5366">
                                    <stop offset="0" stop-color="#dee3f0" />
                                    <stop offset="0.03981841" stop-color="#e1e6f1" stop-opacity="0.9602" />
                                    <stop offset="0.3162" stop-color="#f2f4f9" stop-opacity="0.6838" />
                                    <stop offset="0.6198" stop-color="#fcfcfe" stop-opacity="0.3802" />
                                    <stop offset="1" stop-color="#ffffff" stop-opacity="0" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_2_" node-id="22"
                                    spreadMethod="pad" x1="511.2782" x2="147.7642" y1="785.1588" y2="785.1588">
                                    <stop offset="0" stop-color="#bcc0cc" />
                                    <stop offset="0.2941" stop-color="#bfc3ce" stop-opacity="0.7028" />
                                    <stop offset="0.5142" stop-color="#c9ccd6" stop-opacity="0.4803" />
                                    <stop offset="0.7103" stop-color="#d9dbe2" stop-opacity="0.2822" />
                                    <stop offset="0.8912" stop-color="#eff0f3" stop-opacity="0.09924197" />
                                    <stop offset="0.9894" stop-color="#ffffff" stop-opacity="0" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_3_" node-id="30"
                                    spreadMethod="pad" x1="231.2976" x2="511.2782" y1="560.5914" y2="560.5914">
                                    <stop offset="0" stop-color="#dce0e6" />
                                    <stop offset="1" stop-color="#dfe3eb" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_4_" node-id="34"
                                    spreadMethod="pad" x1="511.2782" x2="231.2976" y1="647.082" y2="647.082">
                                    <stop offset="0" stop-color="#b3bdc9" />
                                    <stop offset="1" stop-color="#d7dae0" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_5_" node-id="38"
                                    spreadMethod="pad" x1="316.9388" x2="409.5714" y1="624.6846" y2="464.2403">
                                    <stop offset="0" stop-color="#c1c8d1" stop-opacity="0" />
                                    <stop offset="1" stop-color="#8f99ab" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_6_" node-id="42"
                                    spreadMethod="pad" x1="511.2782" x2="192.6482" y1="531.0737" y2="531.0737">
                                    <stop offset="0" stop-color="#c1c8d1" />
                                    <stop offset="1" stop-color="#dfe3ed" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_7_" node-id="46"
                                    spreadMethod="pad" x1="791.2589" x2="511.2782" y1="560.3034" y2="560.3034">
                                    <stop offset="0" stop-color="#ccd3db" />
                                    <stop offset="1" stop-color="#d6dae3" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_8_" node-id="50"
                                    spreadMethod="pad" x1="511.2782" x2="791.2589" y1="647.082" y2="647.082">
                                    <stop offset="0" stop-color="#dce0e6" />
                                    <stop offset="1" stop-color="#d3d8e3" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_9_" node-id="54"
                                    spreadMethod="pad" x1="1033.841" x2="1123.8542" y1="615.8333" y2="459.9257">
                                    <stop offset="0" stop-color="#c1c8d1" stop-opacity="0" />
                                    <stop offset="1" stop-color="#c7cbd1" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_10_" node-id="58"
                                    spreadMethod="pad" x1="1229.1658" x2="910.5359" y1="531.0737" y2="531.0737">
                                    <stop offset="0" stop-color="#e1e9f2" />
                                    <stop offset="1" stop-color="#dfe3ed" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_11_" node-id="68"
                                    spreadMethod="pad" x1="712.3872" x2="809.4267" y1="342.301" y2="342.301">
                                    <stop offset="0" stop-color="#dde3eb" />
                                    <stop offset="1" stop-color="#b3b9c9" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_12_" node-id="72"
                                    spreadMethod="pad" x1="1115.5446" x2="1174.6227" y1="405.8369" y2="405.8369">
                                    <stop offset="0" stop-color="#dde3eb" />
                                    <stop offset="1" stop-color="#b3b9c9" />
                                </linearGradient>
                                <linearGradient gradientUnits="objectBoundingBox" id="SVGID_13_" node-id="76"
                                    spreadMethod="pad" x1="1126.5371" x2="1168.3282" y1="497.1751" y2="497.1751">
                                    <stop offset="0" stop-color="#dde3eb" />
                                    <stop offset="1" stop-color="#b3b9c9" />
                                </linearGradient>
                            </defs>
                            <g node-id="247">
                                <path
                                    d="M 987.20 824.70 L 986.90 829.80 L 986.20 834.90 L 984.90 840.10 L 983.20 845.20 L 980.90 850.40 L 978.00 855.60 L 974.20 861.40 L 969.60 867.20 L 964.30 873.10 L 958.10 879.00 L 951.00 885.10 L 943.90 890.50 L 936.10 895.90 L 927.40 901.30 L 917.80 906.80 L 907.20 912.20 L 894.40 918.30 L 880.20 924.40 L 864.70 930.40 L 847.80 936.30 L 829.90 941.90 L 810.80 947.30 L 790.70 952.50 L 770.40 957.10 L 749.20 961.40 L 727.20 965.30 L 705.00 968.80 L 682.20 972.00 L 658.60 974.80 L 635.00 977.10 L 610.80 979.00 L 586.20 980.50 L 561.50 981.60 L 536.60 982.30 L 511.30 982.50 L 486.00 982.30 L 461.10 981.60 L 436.40 980.50 L 411.80 979.00 L 387.60 977.10 L 364.00 974.80 L 340.40 972.00 L 317.60 968.80 L 295.40 965.30 L 273.40 961.40 L 252.20 957.10 L 231.90 952.50 L 211.80 947.30 L 192.70 941.90 L 174.80 936.30 L 157.90 930.40 L 142.40 924.40 L 128.20 918.30 L 115.40 912.20 L 104.80 906.80 L 95.20 901.30 L 86.50 895.90 L 78.70 890.50 L 71.60 885.10 L 64.50 879.00 L 58.30 873.10 L 53.00 867.20 L 48.40 861.40 L 44.60 855.60 L 41.70 850.40 L 39.40 845.20 L 37.70 840.10 L 36.40 834.90 L 35.70 829.80 L 35.40 824.70 L 35.70 819.60 L 36.40 814.50 L 37.70 809.30 L 39.40 804.20 L 41.70 799.00 L 44.60 793.80 L 48.40 788.00 L 53.00 782.20 L 58.30 776.30 L 64.50 770.40 L 71.60 764.30 L 78.70 758.90 L 86.50 753.50 L 95.20 748.10 L 104.80 742.60 L 115.40 737.20 L 128.20 731.10 L 142.40 725.00 L 157.90 719.00 L 174.80 713.10 L 192.70 707.50 L 211.80 702.10 L 231.90 696.90 L 252.20 692.30 L 273.40 688.00 L 295.40 684.10 L 317.60 680.60 L 340.40 677.40 L 364.00 674.60 L 387.60 672.30 L 411.80 670.40 L 436.40 668.90 L 461.10 667.80 L 486.00 667.10 L 511.30 666.90 L 536.60 667.10 L 561.50 667.80 L 586.20 668.90 L 610.80 670.40 L 635.00 672.30 L 658.60 674.60 L 682.20 677.40 L 705.00 680.60 L 727.20 684.10 L 749.20 688.00 L 770.40 692.30 L 790.70 696.90 L 810.80 702.10 L 829.90 707.50 L 847.80 713.10 L 864.70 719.00 L 880.20 725.00 L 894.40 731.10 L 907.20 737.20 L 917.80 742.60 L 927.40 748.10 L 936.10 753.50 L 943.90 758.90 L 951.00 764.30 L 958.10 770.40 L 964.30 776.30 L 969.60 782.20 L 974.20 788.00 L 978.00 793.80 L 980.90 799.00 L 983.20 804.20 L 984.90 809.30 L 986.20 814.50 L 986.90 819.60 L 987.20 824.70 Z"
                                    fill="url(#SVGID_1_)" fill-rule="nonzero" group-id="1" node-id="178" stroke="none"
                                    target-height="315.59998" target-width="951.8" target-x="35.4" target-y="666.9" />
                                <g node-id="252">
                                    <path
                                        d="M 191.00 678.70 L 190.80 683.20 L 190.10 687.50 L 189.10 691.60 L 187.60 695.50 L 183.60 702.90 L 178.40 709.30 L 172.00 714.50 L 164.60 718.50 L 160.70 720.00 L 156.60 721.00 L 152.30 721.70 L 147.80 721.90 L 143.30 721.70 L 139.00 721.00 L 134.90 720.00 L 131.00 718.50 L 123.60 714.50 L 117.20 709.30 L 112.00 702.90 L 108.00 695.50 L 106.50 691.60 L 105.50 687.50 L 104.80 683.20 L 104.60 678.70 L 105.30 670.20 L 106.10 665.10 L 108.00 657.50 L 110.50 649.50 L 113.60 641.60 L 117.20 633.90 L 120.00 628.90 L 126.00 620.30 L 129.40 616.40 L 132.80 613.20 L 136.30 610.70 L 139.10 609.10 L 142.00 607.90 L 144.90 607.30 L 147.80 607.00 L 150.70 607.30 L 153.60 607.90 L 156.50 609.10 L 159.30 610.70 L 162.80 613.20 L 166.20 616.40 L 169.60 620.30 L 175.60 628.90 L 178.40 633.90 L 182.00 641.60 L 185.10 649.50 L 187.60 657.50 L 190.30 670.20 L 191.00 678.70 Z"
                                        fill="#e6eaf0" fill-rule="nonzero" group-id="1,6" node-id="182" stroke="none"
                                        target-height="114.900024" target-width="86.4" target-x="104.6"
                                        target-y="607" />
                                    <path
                                        d="M 167.50 672.80 L 166.40 672.50 L 165.40 672.70 L 164.50 673.20 L 163.80 674.10 L 150.50 701.00 L 150.50 650.20 L 150.30 649.10 L 148.80 647.60 L 147.70 647.40 L 146.60 647.60 L 145.70 648.20 L 145.10 649.10 L 144.90 650.20 L 144.90 676.20 L 130.80 662.00 L 129.90 661.40 L 128.80 661.20 L 127.80 661.40 L 126.90 662.00 L 126.30 662.90 L 126.10 663.90 L 126.30 665.00 L 126.90 665.90 L 144.00 683.00 L 145.00 683.40 L 145.00 758.60 L 145.20 759.70 L 145.80 760.60 L 146.70 761.20 L 147.80 761.40 L 148.90 761.20 L 149.80 760.60 L 150.40 759.70 L 150.60 758.60 L 150.60 713.40 L 168.80 676.50 L 168.90 674.40 L 168.40 673.50 L 167.50 672.80 Z"
                                        fill="#d0d6e0" fill-rule="nonzero" group-id="1,6" node-id="184" stroke="none"
                                        target-height="114" target-width="42.799995" target-x="126.1"
                                        target-y="647.4" />
                                </g>
                                <g node-id="253">
                                    <path
                                        d="M 880.00 683.90 L 879.70 688.80 L 878.70 693.30 L 877.20 697.60 L 875.20 701.70 L 872.70 705.50 L 869.70 708.90 L 866.30 711.90 L 862.50 714.40 L 858.40 716.40 L 854.10 717.90 L 849.50 718.90 L 844.70 719.20 L 839.90 718.90 L 835.30 717.90 L 831.00 716.40 L 826.90 714.40 L 823.10 711.90 L 819.70 708.90 L 816.70 705.50 L 814.20 701.70 L 812.20 697.60 L 810.70 693.30 L 809.70 688.70 L 809.40 683.90 L 809.70 678.80 L 810.70 672.80 L 812.10 666.60 L 814.20 660.00 L 816.80 653.60 L 822.00 643.20 L 826.90 636.20 L 829.60 633.00 L 832.50 630.40 L 835.30 628.30 L 838.40 626.60 L 841.50 625.70 L 844.70 625.30 L 847.90 625.70 L 851.00 626.70 L 854.10 628.30 L 856.90 630.40 L 859.80 633.00 L 862.50 636.20 L 867.40 643.30 L 872.60 653.60 L 875.20 660.10 L 877.30 666.60 L 878.70 672.80 L 879.70 678.80 L 880.00 683.90 Z"
                                        fill="#e6eaf0" fill-rule="nonzero" group-id="1,7" node-id="189" stroke="none"
                                        target-height="93.900024" target-width="70.599976" target-x="809.4"
                                        target-y="625.3" />
                                    <path
                                        d="M 860.80 679.10 L 859.10 679.00 L 857.80 680.10 L 847.00 702.10 L 846.80 659.70 L 845.60 658.50 L 844.70 658.30 L 843.10 659.00 L 842.40 660.60 L 842.40 681.90 L 830.80 670.30 L 830.00 669.80 L 828.40 669.80 L 827.10 671.10 L 827.10 672.70 L 827.60 673.50 L 841.60 687.50 L 842.40 687.80 L 842.40 749.20 L 843.10 750.80 L 843.80 751.30 L 844.70 751.50 L 845.60 751.30 L 846.80 750.10 L 847.00 749.20 L 847.00 712.30 L 861.90 682.10 L 862.00 680.50 L 860.80 679.10 Z"
                                        fill="#d0d6e0" fill-rule="nonzero" group-id="1,7" node-id="191" stroke="none"
                                        target-height="93.20001" target-width="34.900024" target-x="827.1"
                                        target-y="658.3" />
                                </g>
                                <g node-id="254">
                                    <path
                                        d="M 926.80 770.10 L 926.50 773.70 L 925.90 777.10 L 924.70 780.30 L 923.20 783.40 L 921.30 786.20 L 919.10 788.70 L 916.60 790.90 L 913.80 792.80 L 910.70 794.30 L 907.50 795.50 L 904.10 796.10 L 900.50 796.40 L 896.90 796.10 L 893.50 795.50 L 890.30 794.30 L 887.20 792.80 L 884.40 790.90 L 881.90 788.70 L 879.70 786.20 L 877.80 783.40 L 876.30 780.30 L 875.10 777.10 L 874.50 773.70 L 874.20 770.10 L 874.50 765.50 L 875.50 760.00 L 877.10 754.30 L 879.30 748.50 L 881.90 742.80 L 885.00 737.60 L 889.70 731.70 L 894.30 728.20 L 896.30 727.20 L 900.50 726.40 L 904.70 727.20 L 908.80 729.50 L 913.70 734.40 L 916.00 737.60 L 919.10 742.70 L 921.70 748.40 L 923.90 754.30 L 925.50 759.90 L 926.50 765.50 L 926.80 770.10 Z"
                                        fill="#e6eaf0" fill-rule="nonzero" group-id="1,8" node-id="196" stroke="none"
                                        target-height="70" target-width="52.599976" target-x="874.2" target-y="726.4" />
                                    <path
                                        d="M 912.50 766.50 L 911.20 766.40 L 910.20 767.30 L 902.10 783.70 L 902.00 752.10 L 901.00 751.10 L 900.40 751.00 L 899.20 751.50 L 898.70 752.70 L 898.70 768.60 L 890.00 759.90 L 889.40 759.50 L 888.20 759.50 L 887.20 760.50 L 887.20 761.70 L 887.60 762.30 L 898.00 772.70 L 898.60 772.90 L 898.60 818.70 L 899.10 819.90 L 900.30 820.40 L 900.90 820.30 L 901.90 819.30 L 902.00 818.70 L 902.00 791.10 L 913.10 768.60 L 913.30 767.40 L 912.50 766.50 Z"
                                        fill="#d0d6e0" fill-rule="nonzero" group-id="1,8" node-id="198" stroke="none"
                                        target-height="69.400024" target-width="26.099976" target-x="887.2"
                                        target-y="751" />
                                </g>
                            </g>
                            <path d="M 511.30 851.10 L 147.80 761.40 L 299.70 719.20 Z" fill="url(#SVGID_2_)"
                                fill-rule="nonzero" node-id="202" stroke="none" target-height="131.89996"
                                target-width="363.5" target-x="147.8" target-y="719.2" />
                            <path d="M 511.30 362.80 L 231.30 443.20 L 231.30 758.30 L 511.30 665.00 Z"
                                fill="url(#SVGID_3_)" fill-rule="nonzero" node-id="204" stroke="none"
                                target-height="395.5" target-width="280" target-x="231.3" target-y="362.8" />
                            <path d="M 231.30 443.10 L 511.30 522.60 L 511.30 851.10 L 231.30 758.70 Z"
                                fill="url(#SVGID_4_)" fill-rule="nonzero" node-id="206" stroke="none"
                                target-height="407.99997" target-width="280" target-x="231.3" target-y="443.1" />
                            <path d="M 231.30 443.40 L 511.30 523.00 L 484.30 664.40 L 231.30 575.20 Z"
                                fill="url(#SVGID_5_)" fill-rule="nonzero" node-id="208" stroke="none"
                                target-height="221.00003" target-width="280" target-x="231.3" target-y="443.4" />
                            <path d="M 231.30 443.40 L 511.30 523.00 L 469.00 618.70 L 192.60 531.10 Z"
                                fill="url(#SVGID_6_)" fill-rule="nonzero" node-id="210" stroke="none"
                                target-height="175.30002" target-width="318.69998" target-x="192.6" target-y="443.4" />
                            <path d="M 511.30 362.80 L 791.30 443.20 L 791.30 757.80 L 511.30 665.00 Z"
                                fill="url(#SVGID_7_)" fill-rule="nonzero" node-id="212" stroke="none"
                                target-height="395" target-width="280" target-x="511.3" target-y="362.8" />
                            <path d="M 791.30 443.10 L 511.30 522.60 L 511.30 851.10 L 791.30 758.70 Z"
                                fill="url(#SVGID_8_)" fill-rule="nonzero" node-id="214" stroke="none"
                                target-height="407.99997" target-width="280" target-x="511.3" target-y="443.1" />
                            <path d="M 791.30 443.40 L 511.30 523.00 L 550.80 651.60 L 791.30 569.20 Z"
                                fill="url(#SVGID_9_)" fill-rule="nonzero" node-id="216" stroke="none"
                                target-height="208.19998" target-width="280" target-x="511.3" target-y="443.4" />
                            <path d="M 791.30 443.40 L 511.30 523.00 L 553.50 618.70 L 829.90 531.10 Z"
                                fill="url(#SVGID_10_)" fill-rule="nonzero" node-id="218" stroke="none"
                                target-height="175.30002" target-width="318.60004" target-x="511.3" target-y="443.4" />
                            <g node-id="248">
                                <g node-id="255">
                                    <path
                                        d="M 624.50 176.60 L 617.00 186.00 L 609.10 194.90 L 600.70 203.40 L 591.90 211.50 L 582.80 219.20 L 573.40 226.50 L 563.60 233.50 L 553.60 240.00 L 543.30 246.20 L 531.90 252.50 L 520.40 258.40 L 508.70 263.80 L 484.70 273.80 L 472.50 278.30 L 454.10 284.60 L 435.50 290.40 L 402.50 299.80 L 369.30 308.50 L 369.10 308.80 L 369.40 309.00 L 409.40 298.40 L 429.30 292.80 L 462.10 282.50 L 488.00 273.10 L 499.30 268.50 L 521.40 258.50 L 532.20 252.90 L 542.90 247.10 L 553.30 240.80 L 563.50 234.20 L 573.40 227.20 L 583.10 219.70 L 590.80 213.30 L 605.40 199.60 L 612.20 192.30 L 618.70 184.80 L 624.90 176.90 L 624.90 176.60 L 624.50 176.60 Z"
                                        fill="#d3dbeb" fill-rule="nonzero" group-id="2,9" node-id="224" stroke="none"
                                        target-height="132.4" target-width="255.80002" target-x="369.1"
                                        target-y="176.6" />
                                </g>
                            </g>
                            <g node-id="249">
                                <g node-id="256">
                                    <path
                                        d="M 632.70 224.70 L 622.00 236.70 L 610.90 248.40 L 599.40 259.70 L 587.60 270.60 L 575.40 281.10 L 562.90 291.30 L 551.60 299.90 L 539.90 308.30 L 539.80 308.70 L 540.20 308.70 L 553.40 299.20 L 566.30 289.20 L 578.80 278.90 L 591.00 268.20 L 602.80 257.00 L 614.30 245.50 L 633.00 225.00 L 633.00 224.70 L 632.70 224.70 Z"
                                        fill="#d3dbeb" fill-rule="nonzero" group-id="3,10" node-id="232" stroke="none"
                                        target-height="84.000015" target-width="93.20001" target-x="539.8"
                                        target-y="224.7" />
                                </g>
                            </g>
                            <path
                                d="M 712.40 370.30 L 722.20 371.80 L 726.90 372.20 L 738.20 372.30 L 748.50 371.00 L 756.60 368.80 L 760.50 367.20 L 764.20 365.20 L 767.70 362.80 L 771.60 359.60 L 777.20 354.00 L 781.10 348.60 L 783.70 342.60 L 784.50 339.30 L 784.80 336.00 L 785.00 326.50 L 794.10 325.60 L 798.00 325.60 L 804.70 326.50 L 809.20 328.20 L 809.40 326.70 L 808.60 324.30 L 806.20 322.60 L 802.30 321.90 L 795.40 321.60 L 781.80 321.90 L 772.60 323.40 L 768.50 324.70 L 766.00 325.90 L 762.10 328.80 L 759.80 331.70 L 757.60 335.30 L 749.50 351.70 L 747.20 355.40 L 744.70 358.40 L 742.90 360.10 L 741.00 361.40 L 738.90 362.20 L 742.90 354.90 L 746.60 347.10 L 751.10 335.00 L 752.80 331.60 L 754.90 328.40 L 757.40 325.50 L 760.40 323.10 L 764.00 321.00 L 766.90 319.80 L 770.10 319.00 L 773.80 318.50 L 778.00 318.40 L 774.30 315.30 L 772.40 314.10 L 767.30 312.40 L 764.20 312.10 L 758.30 312.60 L 752.00 314.40 L 746.10 317.70 L 743.40 320.00 L 741.00 322.70 L 738.90 325.90 L 737.60 328.80 L 730.20 352.60 L 728.20 357.60 L 725.90 361.90 L 724.10 364.50 L 722.20 366.70 L 720.10 368.40 L 717.80 369.60 L 715.30 370.20 L 712.40 370.30 Z"
                                fill="url(#SVGID_11_)" fill-rule="nonzero" node-id="236" stroke="none"
                                target-height="60.19998" target-width="97" target-x="712.4" target-y="312.1" />
                            <g node-id="250">
                                <path
                                    d="M 689.40 306.10 L 681.70 302.80 L 674.60 298.60 L 671.10 295.90 L 667.80 292.70 L 665.80 290.40 L 662.80 285.00 L 661.50 281.40 L 660.30 275.90 L 660.20 272.30 L 660.70 269.50 L 661.50 266.90 L 665.00 260.60 L 658.50 256.10 L 653.90 254.30 L 651.80 254.00 L 652.10 253.10 L 653.30 252.20 L 655.60 252.10 L 657.40 252.80 L 662.20 255.40 L 668.10 259.20 L 671.00 261.40 L 674.70 265.50 L 676.30 268.90 L 676.60 271.70 L 675.80 285.60 L 676.00 288.70 L 676.40 290.60 L 678.10 293.60 L 678.80 283.30 L 680.20 274.30 L 680.20 270.90 L 679.80 268.60 L 677.70 264.20 L 676.10 262.20 L 674.00 260.30 L 671.20 258.50 L 674.00 258.00 L 676.00 258.00 L 678.10 258.50 L 680.40 259.50 L 684.80 263.00 L 686.60 265.30 L 688.20 268.10 L 689.30 272.20 L 689.40 274.60 L 689.10 276.90 L 685.60 291.30 L 684.90 297.50 L 685.60 301.70 L 686.40 303.50 L 687.70 304.90 L 689.40 306.10 Z"
                                    fill="url(#SVGID_12_)" fill-opacity="0.8" fill-rule="nonzero" group-id="4"
                                    node-id="240" stroke="none" target-height="54" target-width="37.600037"
                                    target-x="651.8" target-y="252.1" />
                            </g>
                            <path
                                d="M 708.40 256.50 L 705.40 252.30 L 703.60 249.20 L 702.00 245.80 L 700.20 239.30 L 700.30 233.90 L 701.20 230.20 L 702.20 227.60 L 703.50 225.40 L 704.80 223.90 L 706.30 222.60 L 710.80 220.10 L 709.30 216.50 L 707.60 213.50 L 705.40 211.20 L 706.40 210.70 L 707.20 210.70 L 708.10 211.20 L 709.20 212.60 L 713.30 220.40 L 714.70 225.10 L 714.80 227.40 L 714.50 229.30 L 713.60 231.10 L 707.90 239.10 L 706.90 241.00 L 706.30 243.00 L 706.30 244.80 L 709.80 239.90 L 714.80 234.00 L 716.10 231.90 L 716.90 229.60 L 717.10 227.00 L 716.30 223.30 L 715.30 221.10 L 718.40 222.60 L 720.50 225.10 L 721.80 228.80 L 722.00 230.90 L 721.90 233.20 L 721.30 235.30 L 720.20 237.50 L 719.10 238.80 L 711.60 246.20 L 708.50 250.40 L 707.70 252.40 L 707.60 253.80 L 708.40 256.50 Z"
                                fill="url(#SVGID_13_)" fill-opacity="0.8" fill-rule="nonzero" group-id="5" node-id="245"
                                stroke="none" target-height="45.800003" target-width="21.799988" target-x="700.2"
                                target-y="210.7" />
                        </svg>
                    </template>
                    <!-- 搜索 -->
                    <template v-if="tabKey === 'scan'">
                        <div class="filter">
                            <a-space v-if="tabKey === 'scan'">
                                <a-input-search v-model:value="keyword" style="width: 500px;" placeholder="请输入要搜索的关键词"
                                    enter-button="搜索" size="large" @search="onSearch(0)" />
                            </a-space>
                            <a-radio-group v-model:value="filterOptions" @change="onSearch(0)">
                                <a-radio-button value="newest">最新</a-radio-button>
                                <a-radio-button value="hottest">最热</a-radio-button>
                            </a-radio-group>
                        </div>

                        <a-table size="small" :loading="tableLoading" :columns="columns"
                            :data-source="platformList[platform].scan"
                            :pagination="{ current: current, pageSize: 50, total: 50 * totalPages, pageSizeOptions: [] }"
                            :scroll="{ y: 'calc(100vh - 64px - 64px - 92px - 150px)' }" @change="onTableChange">
                            <template #bodyCell="{ column, record, index }">
                                <template v-if="column.key === 'id'">
                                    {{ (current - 1) * 50 + index + 1 }}
                                </template>
                                <template v-if="column.key === 'image_base64'">
                                    <a-image :height="50" :src="record.image_base64" />
                                </template>
                                <template v-if="column.key === 'video'">
                                    <a-tag v-if="record.video" color="green">视频</a-tag>
                                    <a-tag v-else color="cyan">图片</a-tag>
                                </template>
                                <template v-if="column.key === 'keywords'">
                                    <a-tag v-for="(tag, index) in record.keywords" :key="index" color="#87d068">{{ tag ?
                                        tag : '推荐'
                                        }}</a-tag>
                                </template>

                                <template v-if="column.key === 'title'">
                                    <a :href="record.feed_url" target="_blank">

                                        <h3 class="title">
                                            <a-space>
                                                {{ record.feed_content.title || '无标题' }}
                                            </a-space>
                                        </h3>
                                        <p class="text" v-if="record.feed_content.text">
                                            {{ record.feed_content.text }}
                                        </p>


                                        <a-tag v-for="(tag, index) in record.feed_content.tags" :key="index"
                                            color="blue">{{ tag }}</a-tag>
                                        <p class="text">
                                            <a-space>
                                                <a-tag color="error"><template #icon>
                                                        <HeartFilled />
                                                    </template>
                                                    {{ formatNumber(record.like_count) }} </a-tag>
                                                <a-tag color="success"><template #icon>
                                                        <ClockCircleOutlined />
                                                    </template>{{ formatDate(record.createdAt) }}</a-tag>
                                            </a-space>
                                        </p>
                                    </a>

                                </template>
                                <template v-if="column.key === 'text'">
                                    {{ record.feed_content.text }}
                                </template>
                                <template v-if="column.key === 'max'">
                                    {{ formatNumber(record.profile_likes_stats?.max) }}
                                </template>
                                <template v-if="column.key === 'std'">
                                    {{ formatNumber(record.profile_likes_stats?.std) }}
                                </template>
                                <template v-if="column.key === 'median'">
                                    {{ formatNumber(record.profile_likes_stats?.median) }}
                                </template>
                                <template v-if="column.key === 'createdAt'">
                                    {{ formatDate(record.createdAt) }}
                                </template>
                                <template v-if="column.key === 'tags'">
                                    <a-button type="link">查看({{ record.feed_content?.tags.length }}个)</a-button>
                                </template>
                                <template v-if="column.key === 'operate'">
                                    <a-space>
                                        <!-- <a :href="record.feed_url" target="_blank" style="color: #fff;">
                                            <a-button type="primary" size="small">
                                                <template #icon>
                                                    <EyeFilled />
                                                </template>
查看
</a-button>
</a> -->
                                        <a-button type="primary" size="small" @click.stop="collect(record)">
                                            <template #icon>
                                                <HeartFilled />
                                            </template>
                                            收藏
                                        </a-button>

                                    </a-space>
                                </template>
                            </template>
                        </a-table>
                    </template>
                </div>
            </a-tab-pane>
        </a-tabs>
    </a-spin>

</template>
<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
import axios from 'axios';
import {
    HeartFilled, DeleteOutlined, EyeFilled, ClockCircleOutlined
} from '@ant-design/icons-vue';
import { notification } from 'ant-design-vue';
const spinning = ref(true);
const tabKey = ref('recommendations')
const breakpoints = ref({
    3000: {
        // 当容器宽度 < 1200
        rowPerView: 9,
    },
    2000: {
        // 当容器宽度 < 1200
        rowPerView: 7,
    },
    1600: {
        // 当容器宽度 < 1200
        rowPerView: 6,
    },
    1400: {
        // 当容器宽度 < 1200
        rowPerView: 5,
    },
    1200: {
        // 当容器宽度 < 1200
        rowPerView: 4,
    },
    1000: {
        // 当容器宽度 < 1200
        rowPerView: 3,
    },
    700: {
        // 当容器宽度 < 800
        rowPerView: 2,
    },
    400: {
        // 当容器宽度 < 500
        rowPerView: 1,
    },
})

const platformList = ref({
    xhs: {
        title: '小红书',
        disabled: false,
        recommendations: [],
        favorites: [], // 收藏列表数组
        scan: [] // 搜索结果数组
    },
    // weibo: {
    //     title: '微博', // 平台名称
    //     disabled: true, // 是否禁用该平台
    //     recommendations: [], // 推荐动态数组
    //     favorites: [], // 收藏列表数组
    //     scan: [], // 搜索结果数组
    // },
    // douyin: {
    //     title: '抖音', // 平台名称
    //     disabled: true, // 是否禁用该平台
    //     recommendations: [], // 推荐动态数组
    //     favorites: [], // 收藏列表数组
    //     scan: [], // 搜索结果数组
    // },
});
const platform = ref(Object.keys(platformList.value)[0]);
const keyword = ref(''); // 搜索关键词
const filterOptions = ref('newest'); // 最新
const totalPages = ref(0); // Total number of results
const current = ref(1); // Current page
const columns = ref([
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 50,
        align: 'center',
        fixed: true,
    },
    {
        title: '封面',
        dataIndex: 'image_base64',
        key: 'image_base64',
        width: 80,
        align: 'center',

    },
    {
        title: '内容',
        dataIndex: 'title',
        key: 'title',
        ellipsis: true,
    },
    // {
    //     title: '正文',
    //     dataIndex: 'text',
    //     key: 'text',
    //     ellipsis: true,
    //     minWidth: 200

    // },
    // {
    //     title: '最大',
    //     dataIndex: 'max',
    //     key: 'max',
    //     width: 80,
    // },
    // {
    //     title: '标准差',
    //     dataIndex: 'std',
    //     key: 'std',
    //     width: 80,
    // },
    // {
    //     title: '中位数',
    //     dataIndex: 'median',
    //     key: 'median',
    //     width: 80,
    // },
    // {
    //     title: '类型',
    //     dataIndex: 'video',
    //     key: 'video',
    //     width: 80,
    // },
    {
        title: '关键词',
        dataIndex: 'keywords',
        key: 'keywords',
        width: 100,
        align: 'center',

    },
    // {
    //     title: '话题',
    //     dataIndex: 'tags',
    //     key: 'tags',
    //     ellipsis: true,
    //     width: 100,
    // },
    // {
    //     title: '抓取时间',
    //     dataIndex: 'createdAt',
    //     key: 'createdAt',
    //     width: 170,
    //     ellipsis: true,

    // },
    {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        align: 'center',
        width: 100,
    }
]);
const tableLoading = ref(false);
watch(tabKey, (newVal) => {
    nextTick(() => {
        const box = document.querySelector('.box');
        if (box) {
            box.scrollTop = 0;
        }
    });
    if (newVal === 'favorites') {
        spinning.value = true;
        getFavorites();
    }
    if (newVal === 'scan') {
        tableLoading.value = true;
        onSearch(0, 'scan');
    }
    if (newVal === 'recommendations') {
        spinning.value = true;
        onSearch(0, 'recommendations');
    }
});
onMounted(() => {
    onSearch(0, 'recommendations')
    getSocketMessage();
    nextTick(() => {
        const box = document.querySelector('.box');
        if (box) {
            box.addEventListener('scroll', onWaterfallScroll);
        }
    });
});
// 根据形参地址，进行新开标签页跳转
const openNewTab = (url) => {
    if (url) {
        window.open(url, '_blank');
    }
};
// 收藏按钮，点击后，进行收藏
const collect = (item) => {
    axios.post('/api/user_favorites', {
        _id: item._id,
        username: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')).username : '',
    })
        .then((response) => {
            console.log('收藏成功', response.data);
            notification.success({
                message: '收藏成功',
                description: '已将该动态添加到收藏夹',
            });
        })
        .catch((error) => {
            console.error('Error:', error);
            notification.error({
                message: '收藏失败',
                description: '请稍后再试',
            });
        });
};
// 获取收藏列表
// GET /api/user_favorites?username=xxx
function getFavorites() {
    axios.get('/api/user_favorites', {
        params: {
            username: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')).username : '',
        }
    })
        .then((response) => {
            console.log('收藏列表', response.data);
            const data = response.data;
            platformList.value[platform.value].favorites = data
            spinning.value = false;
        })
        .catch((error) => {
            console.error('Error:', error);
        });
}
// 删除收藏
function deleteFavorites(_id, index) {
    axios.delete(`/api/user_favorites/${_id}`)
        .then((response) => {
            console.log('删除收藏成功', response.data);
            // 删除成功后，更新收藏列表
            platformList.value[platform.value].favorites.splice(index, 1);
            notification.success({
                message: '删除收藏成功',
                description: '已将该动态从收藏夹中删除',
            });
        })
        .catch((error) => {
            console.error('Error:', error);
            notification.error({
                message: '删除收藏失败',
                description: '请稍后再试',
            });
        });
}
// 转换时间格式
const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
};
// 需要按千进位
const formatNumber = (num) => {
    if (num >= 10000) {
        return (num / 10000).toFixed(1) + 'W';
    }
    return num;
};
// 获取数据
// const getData = async () => {
//     try {
//         const response = await axios.get('/api/hotfeeds');
//         if (response.status === 200) {
//             const data = response.data.results;
//             platformList.value[platform.value].recommendations = data
//             spinning.value = false;
//         }
//     } catch (error) {
//         console.error('Error fetching data:', error);
//     }
// };
// 如果存在window.socket 则选择接受消息
// 接收socket消息的方法
function getSocketMessage() {
    setTimeout(() => {
        if (window.socket) {
            window.socket.on('hot-feed', (msg) => {
                console.log('Received message:', msg);
                platformList.value[platform.value].recommendations.unshift(msg);
                if (platformList.value[platform.value].recommendations.length > 50) {
                    platformList.value[platform.value].recommendations.pop();
                }
                notification.open({
                    message: '发现新动态',
                    description: msg.title,
                    onClick: () => {
                        console.log('Notification Clicked!');
                    },
                });
            });
        } else {
            console.log('Socket is not connected.');

        }
    }, 3000);
}
// 判断是否存在socket，如果存在，可以发送消息
function sendSocketMessage() {
    if (window.socket) {
        window.socket.emit('message', 'Hello Server!');
    } else {
        console.log('Socket is not connected.');
    }
}

// 表格变化时的回调函数
function onTableChange(pagination, filters, sorter) {
    if (pagination.current !== current.value) {
        current.value = pagination.current;
        onSearch('page'); // Fetch data for the new page
    }
}

// 标记是否正在加载更多
const loadingMore = ref(false);

// 监听 Waterfall 滚动，触底时加载更多
function onWaterfallScroll(e) {
    const el = e.target;
    console.log(el.scrollHeight,el.scrollHeight - el.scrollTop - el.clientHeight );
    
    // 距离底部小于1500px时触发
    if (el.scrollHeight - el.scrollTop - el.clientHeight < 10000 && !loadingMore.value && tabKey.value === 'recommendations') {
        if (current.value >= totalPages.value) {
            console.log('没有更多数据了');
            return;
        } else {
            loadingMore.value = true;
            current.value = current.value + 1; // 增加当前页数
        }
        onSearch(true, 'recommendations');
    }
}

// 通过搜索获取数据
// /api/search?keyword=明星&page=2
const onSearch = async (page, type) => {
    tableLoading.value = true;
    loadingMore.value = true;
    if (!page) current.value = 1;
    try {
        const response = await axios.get('/api/search', {
            params: {
                keyword: type === 'recommendations' ? '' : keyword.value,
                page: current.value,
                orderby: filterOptions.value,
            }
        });
        if (response.status === 200) {
            spinning.value = false;
            tableLoading.value = false;
            loadingMore.value = false;
            const data = response.data;
            totalPages.value = data.totalPages; // Assuming the API returns a `total` count
            if (type === 'recommendations') {
                if (current.value === 1) {
                    platformList.value[platform.value].recommendations = data.results; // Assuming the API returns a `results` array
                } else {
                    platformList.value[platform.value].recommendations.push(...data.results);
                }
            } else {
                platformList.value[platform.value].scan = data.results; // Assuming the API returns a `results` array
            }
        }
    } catch (error) {
        spinning.value = false;
        tableLoading.value = false;
        loadingMore.value = false;
        console.error('Error fetching data:', error);
    }
};


</script>
<style lang="scss" scoped>
.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 3px;

    span {
        font-size: 13px;
    }
}

.box {
    width: 100%;
    // width: 1200px;
    height: calc(100vh - 64px - 64px - 90px);
    overflow-y: scroll;
    // margin: 0 auto;
}

.result {
    width: 400px;
    transform: translateX(-50%);
    margin-left: 50%;
}

.play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 20px;
    height: 20px;
    background: rgba($color: #000000, $alpha: 0.3);
    border-radius: 20px;

    .reds-icon {
        display: inline-block;
        vertical-align: middle;
        fill: currentColor;
    }
}

.text {
    width: 100%;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 5px 0;
}

.title {
    margin: 0;
}

.filter {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

a {
    color: #000000;

    &:hover {
        color: #0958D9;
    }
}
</style>